<template>
  <div class="v-class">
    <h2 class="title">class与style绑定</h2>
    <div>
      <h3 class="title-sub">绑定class</h3>
      <div>
        <span :class="{'class-a': isA, 'class-b': isB}">对象语法</span>
        <span :class="classObject">对象语法</span>
        <span :class="[classA, classB]">数组语法</span>
        <span :class="[classA, isB ? classB : '']">数组语法</span>
        <span :class="[classA, { classB: isB }]">数组语法</span>
      </div>
    </div>
    <div>
      <h3 class="title-sub">绑定style</h3>
      <div>
        <span :style="{color: styleColor, fontSize: styleFonteSize + 'px'}">对象语法</span>
        <span :style="styleObject">对象语法</span>
        <span :style="[styleObjectA, styleObjectB]">数组语法</span>
      </div>
    </div>
    <div>
      <h3 class="title-sub">返回对象的计算属性</h3>
      <div>
        <span :class="classComputedObject">计算属性</span>
      </div>
    </div>
      <div>
      <h3 class="title-sub">ref</h3>
      <div>
        <span @click="toggleClass" ref="refClass">按钮</span>
      </div>
    </div>
    <a href="https://www.cnblogs.com/jiangxiaobo/p/5424910.html" target="_blnk">class绑定和style绑定博客</a>
  </div>
</template>

<script>
export default {
  name: 'ClassDemo',
  data () {
    return {
      // class 绑定
      isA: true,
      isB: false,
      classObject: {
        'class-a': true,
        'class-b': false
      },
      classA: 'class-a',
      classB: 'class-b',
      // sytle 绑定
      styleColor: 'red',
      styleFonteSize: 20,
      styleObject: {
        color: 'red',
        fontSize: '20px'
      },
      styleObjectA: {
        color: 'red'
      },
      styleObjectB: {
        fontSize: '20px'
      },
      // 返回对象的计算属性
      isActive: true,
      error: null,
      refClass: false
    }
  },
  computed: {
    classComputedObject () {
      return {
        'active': this.isActive && !this.error,
        'text-danger': this.isActive
      }
    }
  },
  methods: {
    toggleClass () {
      this.refClass = !this.refClass
      if (this.refClass) {
        this.$refs.refClass.style.color = 'red'
        this.$refs.refClass.style.fontSize = '20px'
      } else {
        this.$refs.refClass.style.color = '#000'
        this.$refs.refClass.style.fontSize = '16px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.v-class {
  padding: 20px;
  .title {
    font-size: 24px;
    font-weight: 700;
  }
  .title-sub {
    font-size: 18px;
    font-weight: 600;
  }
}
</style>
